<template>
  <div>
    <el-dialog
      title="提示"
      :visible.sync="dialogShow"
      width="500px"
      height="298px"
      @close="closeDialog"
      center
      custom-class="dialogNoPadding dialogFontGray"
    >
      <div class="change_success_body">
        <img src="/static/img/base/success.png" alt />
        <p class="success_text">修改价格成功</p>
        <p class="timer">{{timers}}秒后自动关闭窗口</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogShow: false,
      timers: 3
    };
  },
  methods: {
    closeDialog() {
      this.$emit("close");
    },
    submitDialog() {
      this.$emit("submit");
    }
  },
  mounted() {
    let t = setInterval(() => {
      this.timers -= 1;
      if (this.timers === 0) {
        this.dialogShow = false;
        clearInterval(t);
      }
    }, 1000);
  }
};
</script>

<style scoped>
.change_success_body {
  padding: 40px 180px;
  display: flex;
  justify-content: center;
  text-align: center;
  flex-wrap: wrap;
}
.change_success_body img {
  margin-bottom: 30px;
}
.change_success_body .nsuccess_text {
  margin-bottom: 10px;
  font-weight: 400;
  color: rgba(45, 55, 62, 1);
}
.change_success_body .timer {
  margin-bottom: 10px;
  font-weight: 400;
  color: rgba(152, 159, 173, 1);
}
</style>